<template>
  <div>
    <div class="main-tab">
      <div class="message" v-if="loginStatus" @click="goMsg">
        <!--<div class="message-redDot" ></div>-->
        <img class="message-icon" src="../../../static/img/message.png" />
      </div>
      <swiper auto style="width:100%" height="17.5rem" dots-class="custom-bottom" dots-position="center" >
        <swiper-item class="swiper-demo-img" v-for="(item, index) in list" :key="index">
          <img :src="item.imgUrl">
        </swiper-item>
      </swiper>
      <div class="part2">
        <div class="part2-item" v-for="item in hotList" @click="go(item.path)">
          <img class="part2-item-img" :src="item.icon"/>
          <div class="part2-item-title">{{ item.title }}</div>
        </div>
      </div>
      <div class="part3">
        <img class="part3-poster" src="../../../static/img/2.jpg" />
        <x-button class="part3-introduce" :gradients="['#F46A32', '#EF3226']"  link="recommend">推荐客户</x-button>
      </div>
    </div>
    <b-tabbar :value="0" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { getSliderList } from '@/api/home'
import { cookie } from 'vux'
export default {
  name: 'home',
  components: {
    bTabbar,
  },
  data () {
    return {
      loginStatus: false,
      list:[
        {
          url: 'javascript:',
          imgUrl: require('../../../static/img/1.png'),
          title: '遇见'
        },
        {
          url: 'javascript:',
          imgUrl: require('../../../static/img/1.png'),
          title: '遇见'
        },
      ],
      hotList: [
        {
          icon: require('../../../static/img/query.png'),
          title: '进度查询',
          path: 'process'
        },
        {
          icon: require('../../../static/img/team.png'),
          title: '我的团队',
          path: 'team'
        },
        {
          icon: require('../../../static/img/invite.png'),
          title: '推广邀请',
          path: 'spread'
        },
        {
          icon: require('../../../static/img/good.png'),
          title: '热门产品',
          path: 'good'
        }
      ]
    }
  },
  methods:{
    getSliderListHandle() {
      getSliderList()
    },
    goMsg () {
      this.$router.push({ name: 'sysMsg' })
    },
    go (path) {
      this.$router.push({ name: path })
    },
  },
  mounted() {
    // console.log(cookie.get('userInfo'))
    if (cookie.get('userInfo')) {
      this.loginStatus = true
      if (!this.globalData.cid) this.globalData.cid = (JSON.parse(cookie.get('userInfo'))).id
    }
    getSliderList().then( data => {
      this.list = data.data
    })
  }
}
</script>

<style scoped>
.message {
  z-index: 2;
  position: absolute;
  right: 1.2rem;
  top: 1rem;
}
.message-redDot {
  position: absolute;
  top:-0.1rem;
  right: -0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  background: red;
  border-radius: 50%;
}
.message-icon {
  height: 2rem;
  width: 2rem;
}
.part2 {
  display: flex;
  background: #fff;
  padding: 1rem;
  justify-content: space-between;
}
.part2-item {
}
.part2-item-img {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  display: block;
}
.part2-item-title {
  margin-top:1.5rem;
  text-align: center;
  font-size: 12px;
}
.part3 {
  margin-top: 1rem;
  padding: 1rem 1rem;
  background: #fff;
}
.part3-poster {
  width: 100%;
  height: 12rem;
  display: block;
  margin-bottom: 1.45rem;
}
.part3-introduce {
  width: 16rem;
  height: 3.4rem;
  border-radius: 1.7rem;
}
.swiper-demo-img img {
  width: 100%;
}
</style>
